<template>
  <h1>Mobile News</h1>
  <router-view/>
  <footer>
    <router-link exact-active-class="active" :to="{ name: 'mobile-home' }">Home</router-link>
    <router-link exact-active-class="active" :to="{ name: 'mobile-user' }">User</router-link>
    <router-link exact-active-class="active" :to="{ name: 'mobile-about' }">About</router-link>
  </footer>
</template>

<script>
export default {
  name: "Mobile"
}
</script>

<style scoped lang="stylus">
border-color = rgba(0, 0, 0, .4)

h1
  margin 0
  color red
  border-bottom 1px solid red

footer
  position fixed
  left 0
  right 0
  bottom 0
  box-shadow 0 -1px 10px border-color
  height: 50px;
  display: flex;
  align-items: center;
  background-color #fff

  a
    width 33.33333%
    color #333
    text-align center

    &.active
      color red

  //.active
  //  color darkred
</style>
